<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2023-03-26 14:44:04
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2023-03-26 20:37:28
 * @FilePath: \bulletin-board\src\views\netSource\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="net-content">
    <div class="net-top-content">
      <!--左侧点击切换-->
      <div class="net-top-content-left">
        <titleView
          text="云网资源情况"
          :font-size="24"
          :bg-image="require('../../assets/image/yunziyuan.png')"
        />
        <div class="net-eachare">
          <div class="net-left">
            <ul class="net-left-ul">
              <li
                v-for="(item, index) in 6"
                :key="index"
                :class="[activeIndex === index ? 'activeClass' : '']"
                @click="() => (activeIndex = index)"
              >
                测试
              </li>
            </ul>
          </div>
          <div class="net-right">
            <ul class="net-left-ul">
              <li
                v-for="(item, index) in typeData"
                :key="index"
                :class="[activeTitleIndex === index ? 'activeClass' : '']"
                @click="() => (activeTitleIndex = index)"
              >
                {{ item }}
              </li>
            </ul>
            <bgContent
              v-for="(item, index) in 3"
              :key="item"
              :bg-color-style="index === 1 ? objCss : index == 2 ? objCss1 : {}"
              :bg-color="index === 1 ? color1 : index == 2 ? color2 : '#15C0E6'"
            >
              <div
                style="
                  display: flex;
                  width: 360px;
                  justify-content: space-around;
                  align-items: center;
                  margin-top: 12px;
                "
              >
                <textAndCount
                  :top-style="{
                    fontSize: '30.0px',
                    fontFamily: 'Microsoft YaHei-Bold, Microsoft YaHei',
                    fontWeight: 'bold',
                    color: '#2B4054'
                  }"
                  top-text="99%"
                  :bottom-style="yunCss"
                  bottom-text="使用量"
                  :top-bottom-font="true"
                  :top-bottom-style="{
                    color: '#2B4054',
                    fontSize: '18.0px'
                  }"
                  bottom-unit="类"
                />
                <textAndCount
                  :top-style="{
                    fontSize: '30.0px',
                    fontFamily: 'Microsoft YaHei-Bold, Microsoft YaHei',
                    fontWeight: 'bold',
                    color: '#2B4054'
                  }"
                  top-text="99%"
                  :bottom-style="yunCss"
                  bottom-text="使用率"
                  :top-bottom-font="false"
                  :top-bottom-style="{
                    color: '#2B4054',
                    fontSize: '18.0px'
                  }"
                />
              </div>
            </bgContent>
          </div>
        </div>
      </div>
      <div class="net-top-content-right">
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <titleView
            text="云实例概况"
            :font-size="24"
            :bg-image="require('../../assets/image/yunziyuan.png')"
          />

          <ul class="net-left-ul">
            <li
              v-for="(item, index) in typeData"
              :key="index"
              :class="[activeTitleIndexYun === index ? 'activeClass' : '']"
              @click="() => (activeTitleIndexYun = index)"
            >
              {{ item }}
            </li>
          </ul>
        </div>
        <CircleChart
          id="chart"
          width="400.0px"
          height="350.0px"
          max-width="700px"
        />
      </div>
    </div>

    <div class="net-bottom-content">
      <div class="net-bottom-content-left">
        <titleView
          text="支撑应用排行"
          :font-size="24"
          :bg-image="require('../../assets/image/yunziyuan.png')"
        />

        <elTable
          :table-data="tableData"
          style="width: 100%; margin-top: 23px"
          :height="430"
        >
          <el-table-column prop="date" label="日期"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>

          <el-table-column prop="address" width="200" label="地址">
            <template slot-scope="scope">
              <div
                @click="handleClickDialog"
                style="color: #3f8cff; cursor: pointer"
              >
                {{ scope.row.address }}
              </div>
            </template>
          </el-table-column>
        </elTable>
      </div>
      <div class="net-bottom-content-right">
        <titleView
          text="部门利用率排行"
          :font-size="24"
          :bg-image="require('../../assets/image/yunziyuan.png')"
        />
        <elTable
          :table-data="[
            { name: '个人单点', count: '666', age: 100, age1: 100, age2: 100 },
            {
              name: '个人单点登录',
              count: '666',
              age: 100,
              age1: 100,
              age2: 100
            },
            {
              name: '个人单点登录(政府侧)',
              count: '666',
              age: 100,
              age1: 100,
              age2: 100
            },
            {
              name: '个人单点登录政',
              count: '666',
              age: 100,
              age1: 100,
              age2: 100
            },
            {
              name: '个人单点登录政府',
              count: '666',
              age: 100,
              age1: 100,
              age2: 100
            },
            { name: '个人单点', count: '666', age: 100, age1: 100, age2: 100 },
            {
              name: '个人单点登',
              count: '666',
              age: 100,
              age1: 100,
              age2: 100
            },
            {
              name: '个人单点登录政府侧',
              count: '666',
              age: 100,
              age1: 100,
              age2: 100
            },
            {
              name: '个人单点登录政府侧',
              count: '666',
              age: 100,
              age1: 100,
              age2: 100
            },
            {
              name: '个人单点登录政府侧',
              count: '666',
              age: 100,
              age1: 100,
              age2: 100
            },
            {
              name: '个人单点登录政府侧',
              count: '666',
              age: 100,
              age1: 100,
              age2: 100
            },
            {
              name: '个人单点登录政府侧',
              count: '666',
              age: 100,
              age1: 100,
              age2: 100
            },
            {
              name: '个人单点登录政府侧',
              count: '666',
              age: 100,
              age1: 100,
              age2: 100
            },
            {
              name: '个人单点登录政府侧',
              count: '666',
              age: 100,
              age1: 100,
              age2: 100
            }
          ]"
          style="width: 100%; margin-top: 23px"
          :height="430"
        >
          <el-table-column
            prop="name"
            width="200"
            label="排名"
          ></el-table-column>
          <el-table-column prop="count" label="部门"></el-table-column>
          <el-table-column prop="age" label="CPU利用率"></el-table-column>
          <el-table-column prop="age1" label="内存利用率"></el-table-column>
          <el-table-column prop="age2" label="储存利用率"></el-table-column>
        </elTable>
      </div>
    </div>

    <!--dialog-->
    <Dialog title="实例列表" :visible.sync="show">
      <div style="margin: 10px 46px">
        <div style="display: flex; align-items: center; margin-top: 20px">
          <img src="@/assets/image/mesage.png" />
          <span>共6个实例</span>
        </div>
        <elTable
          :table-data="[
            { name: '个人单点', count: '666', age: 100, age1: 100, age2: 100 },
            {
              name: '个人单点登录',
              count: '666',
              age: 100,
              age1: 100,
              age2: 100
            },
            {
              name: '个人单点登录(政府侧)',
              count: '666',
              age: 100,
              age1: 100,
              age2: 100
            },
            {
              name: '个人单点登录政',
              count: '666',
              age: 100,
              age1: 100,
              age2: 100
            },
            {
              name: '个人单点登录政府',
              count: '666',
              age: 100,
              age1: 100,
              age2: 100
            },
            { name: '个人单点', count: '666', age: 100, age1: 100, age2: 100 },
            {
              name: '个人单点登',
              count: '666',
              age: 100,
              age1: 100,
              age2: 100
            },
            {
              name: '个人单点登录政府侧',
              count: '666',
              age: 100,
              age1: 100,
              age2: 100
            },
            {
              name: '个人单点登录政府侧',
              count: '666',
              age: 100,
              age1: 100,
              age2: 100
            },
            {
              name: '个人单点登录政府侧',
              count: '666',
              age: 100,
              age1: 100,
              age2: 100
            },
            {
              name: '个人单点登录政府侧',
              count: '666',
              age: 100,
              age1: 100,
              age2: 100
            },
            {
              name: '个人单点登录政府侧',
              count: '666',
              age: 100,
              age1: 100,
              age2: 100
            },
            {
              name: '个人单点登录政府侧',
              count: '666',
              age: 100,
              age1: 100,
              age2: 100
            },
            {
              name: '个人单点登录政府侧',
              count: '666',
              age: 100,
              age1: 100,
              age2: 100
            }
          ]"
          style="width: 100%; margin-top: 10px"
          :height="500"
        >
          <el-table-column
            prop="name"
            width="200"
            label="排名"
          ></el-table-column>
          <el-table-column prop="count" label="部门"></el-table-column>
          <el-table-column prop="age" label="CPU利用率"></el-table-column>
          <el-table-column prop="age1" label="内存利用率"></el-table-column>
          <el-table-column prop="age2" label="储存利用率"></el-table-column>
        </elTable>
      </div>
    </Dialog>
  </div>
</template>

<script>
import titleView from '@/components/title'
import bgContent from './components/bgContent.vue'
import textAndCount from '@/components/textAndCount'
import CircleChart from './components/circleChart.vue'
import elTable from '@/components/elTable'
import Dialog from '@/components/dialog'

export default {
  components: {
    titleView,
    bgContent,
    textAndCount,
    CircleChart,
    elTable,
    Dialog
  },
  data() {
    return {
      yunCss: {
        fontSize: '18.0px',
        fontFamily: 'Microsoft YaHei-Bold, Microsoft YaHei',
        fontWeight: '400',
        color: '#2B4054'
      },
      yunTop: {
        fontSize: '30.0px',
        fontFamily: 'Microsoft YaHei-Bold, Microsoft YaHei',
        fontWeight: 'bold',
        color: '#3F8CFF'
      },
      activeIndex: 0,
      objCss: {
        background:
          'linear-gradient(180deg, rgba(253,199,72,0.15) 0%, rgba(222,246,251,0) 100%)'
      },
      objCss1: {
        background:
          ' linear-gradient(180deg, rgba(161,146,255,0.15) 0%, rgba(222,246,251,0) 100%)'
      },

      color1: '#FDC748',
      color2: '#A192FF',
      activeTitleIndex: 0,
      activeTitleIndexYun: 0,
      typeData: ['全部', 'x86', '信创'],
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: ' 66'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: ' 66'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: ' 66'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: ' 66'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: ' 66'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: ' 66'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: ' 66'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: ' 66'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: ' 66'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: ' 66'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: ' 66'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: ' 66'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: ' 66'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: ' 66'
        }
      ],
      show: false
    }
  },
  methods: {
    handleClickDialog() {
      this.show = true
    }
  }
}
</script>

<style lang="scss" scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.net-content {
  width: 1920px;
  height: 100%;
  margin: 0 auto;
  padding: 30px;
  .net-top-content {
    display: flex;
    justify-content: space-between;
    .net-top-content-left {
      width: 1388px;
      height: 400px;
      background: #ffffff;
      border-radius: 16px 16px 16px 16px;
      opacity: 1;
      padding: 20px;
      .net-eachare {
        display: flex;
        margin-top: 22px;
        align-items: center;
        .net-right {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          position: relative;
          margin-left: 20px;
          .net-left-ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            position: absolute;
            top: -66px;
            right: 0;
            li {
              width: 60px;
              height: 30px;
              text-align: center;
              line-height: 30px;
              font-size: 18px;
              font-family: Microsoft YaHei-Bold, Microsoft YaHei;
              color: #2b4054;
              cursor: pointer;
              transition: 0.3s;
              font-weight: 400;
              &:not(:first-child) {
                // margin-top: 6px;
              }
            }
            .activeClass {
              color: #3f8cff;
              position: relative;
              font-weight: bold;

              &:after {
                position: absolute;
                bottom: 0;
                width: 40px;
                height: 4px;
                background: #3f8cff;
                border-radius: 20px 20px 0px 0px;
                opacity: 1;
                content: '';
                left: 50%;
                transform: translateX(-50%);
              }
            }
          }
        }
        .net-left {
          width: 160px;
          .net-left-ul {
            list-style: none;
            padding: 0;
            margin: 0;
            li {
              width: 140px;
              height: 46px;
              background: rgba(229, 239, 255, 0.3);
              border-radius: 8px 8px 8px 8px;
              opacity: 1;
              text-align: center;
              line-height: 46px;
              font-size: 18px;
              font-family: Microsoft YaHei-Bold, Microsoft YaHei;
              font-weight: bold;
              color: #2b4054;
              cursor: pointer;
              transition: 0.3s;

              &:not(:first-child) {
                margin-top: 6px;
              }
            }
            .activeClass {
              color: #3f8cff;
              position: relative;
              &:after {
                position: absolute;
                bottom: 0;
                width: 40px;
                height: 4px;
                background: #3f8cff;
                border-radius: 20px 20px 0px 0px;
                opacity: 1;
                content: '';
                left: 50%;
                transform: translateX(-50%);
              }
            }
          }
        }
      }
    }
    .net-top-content-right {
      width: 443px;
      height: 400px;
      background: #ffffff;
      border-radius: 16px 16px 16px 16px;
      padding: 20px;
      position: relative;
      .net-left-ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        position: absolute;
        top: 15px;
        right: 30px;
        li {
          width: 60px;
          height: 30px;
          text-align: center;
          line-height: 30px;
          font-size: 18px;
          font-family: Microsoft YaHei-Bold, Microsoft YaHei;
          color: #2b4054;
          cursor: pointer;
          transition: 0.3s;
          font-weight: 400;
          &:not(:first-child) {
            // margin-top: 6px;
          }
        }
        .activeClass {
          color: #3f8cff;
          position: relative;
          font-weight: bold;

          &:after {
            position: absolute;
            bottom: 0;
            width: 40px;
            height: 4px;
            background: #3f8cff;
            border-radius: 20px 20px 0px 0px;
            opacity: 1;
            content: '';
            left: 50%;
            transform: translateX(-50%);
          }
        }
      }
    }
  }
  .net-bottom-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    .net-bottom-content-left {
      width: 916px;
      height: 510px;
      background: #ffffff;
      border-radius: 16px 16px 16px 16px;
      padding: 20px;
    }
    .net-bottom-content-right {
      width: 916px;
      height: 510px;
      background: #ffffff;
      border-radius: 16px 16px 16px 16px;
      padding: 20px;
    }
  }
}
</style>
